<template>
	<view class="categoryContainer">
		<view class="categoryItem" v-for="(category,index) in categoryModule" :key='index'>
			<image class="categoryImage" :src="category.titlePicUrl"></image>
			<scroll-view scroll-x="true" class="scrollView">
				<view class="scrollItem" v-for="item in category.itemList" :key='item.id'>
					<image :src="item.primaryPicUrl"></image>
					<text>{{item.name}}</text>
				</view>
				<view class="scrollItem more">
					查看更多
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex';
	export default {
		name: 'category',
		computed:{
			...mapGetters(['categoryModule'])
		}
	}
</script>

<style lang="stylus">
	.categoryContainer
		.categoryItem
			margin-top 10upx
			.categoryImage
				width 100%
				height 370upx
			.scrollView
				display flex
				width 100%
				white-space nowrap
				.scrollItem
					width 200upx
					display inline-block
					margin-left 20upx
					vertical-align top
					&.more
						background-color #eee
						line-height 200upx
						text-align center
						margin-right 20upx
					image
						width 200upx
						height 200upx
						background-color #eee
					text
						width 100%
						font-size 24upx
						display -webkit-box
						overflow hidden
						white-space pre-wrap
						-webkit-box-orient vertical
						-webkit-line-clamp 2
</style>
